<template>
    <div @click="linkto" class="item">
        
        <img :src="novelitem.picUrl || 'https://bookcover.yuewen.com/qdbimg/349573/1034360760/150'" alt="">
        <p>{{novelitem.brief}}1</p>

    </div>
</template>

<script>    
    export default {
        props:{ 
            novelitem:{
                type:Object,
           
                default:()=>{ 
                        return {
                    picUrl:"https://bookcover.yuewen.com/qdbimg/349573/1034360760/150",
                    brief:"The Hidden Princess And Seven Nobles",
                    name:"斗破苍穹",
                    author:"天蚕土豆",
                    id:"13",
                    lv:4.5,
                    evaluate:"Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, she came back to life in a different body and a different world. In a world that is far from modern, slavery and murder are very commonplace. Reviving in a different body did not make her happy, she was faced with two choices between life and death again, became one of the entertainer slaves at a hunting event held once a month by the superior sons of the kingdom, including the crown prince."
                }
                }
            
        }
        },
        methods: {
            linkto(){
                // console.log(this.$router);
                // this.$router.push({ name:'reader' , params:{  id:this.$props.novelitem.id  , sort:1 }  })
                this.$router.push({ name:'novel' , params:{  id:this.$props.novelitem.id  , sort:1 }  })
         
            }
        },
    }
</script>

<style lang="scss" scoped>
.item{
    display: inline-block;
    width: 2.4rem;
    margin: 0.2rem;
    overflow: hidden;
    img{
        width: inherit;
    }
}
    p{ 
        width: inherit;
        font-size: 0.4rem;
       -webkit-line-clamp: 2;
       text-overflow: ellipsis;
       display:-webkit-box;
   
       /*设置或检索伸缩盒对象的子元素的排列方式*/
        -webkit-box-orient:vertical;

    }
</style>